<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义形状</title>
</head>
<body onload="init()">
<script src="three.min.js"></script>
<script>
  /* 参数
   -----------------------------------------------------------------

   THREE.Geometry()

   new THREE.Vector3(-1, 2, -1) 创建一个矢量，作为顶点位置追加到 geometry.vertices 数组中。
   new THREE.Face3(0, 1, 3) 创建一个三个顶点组成的面片，追加到 geometry.faces 数组中。
   三个参数分别是四个顶点在 geometry.vertices 中的序号

   -----------------------------------------------------------------
   */

  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(50, 400 / 300, 1, 10)
    camera.position.set(1, 3, 5);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    let geometry = new THREE.Geometry();

    // 设置顶点位置
    // 顶部4顶点
        geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
        geometry.vertices.push(new THREE.Vector3(1, 2, -1));
        geometry.vertices.push(new THREE.Vector3(1, 2, 1));
        geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
    // 底部4顶点
        geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
        geometry.vertices.push(new THREE.Vector3(2, 0, -2));
        geometry.vertices.push(new THREE.Vector3(2, 0, 2));
        geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

    // 设置顶点连接情况
    // 顶面
        geometry.faces.push(new THREE.Face3(0, 1, 3));
        geometry.faces.push(new THREE.Face3(1, 2, 3));
    // 底面
        geometry.faces.push(new THREE.Face3(4, 5, 6));
        geometry.faces.push(new THREE.Face3(5, 6, 7));
    // 四个侧面
        geometry.faces.push(new THREE.Face3(1, 5, 6));
        geometry.faces.push(new THREE.Face3(6, 2, 1));
        geometry.faces.push(new THREE.Face3(2, 6, 7));
        geometry.faces.push(new THREE.Face3(7, 3, 2));
        geometry.faces.push(new THREE.Face3(3, 7, 0));
        geometry.faces.push(new THREE.Face3(7, 4, 0));
        geometry.faces.push(new THREE.Face3(0, 4, 5));
        geometry.faces.push(new THREE.Face3(0, 5, 1));

    let cube = new THREE.Mesh(
        geometry,
        new THREE.MeshBasicMaterial({
          color: 0xff0000,
          wireframe: true
        })
    );
    scene.add(cube);

    renderer.render(scene, camera);
  }
</script>
</body>
</html>